<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST登錄</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            height: 100%;
        }
         .zhuti{
             background-color: #eee;
             border: solid 1px #eee;
             width: 500px;
             height: 25%;
             line-height: 40px;
             border-radius: 5px;

             position: absolute;
             top: 50%;
             left: 50%;
             margin-top: -150px;
             margin-left: -200px;

         }
         #btnLogin{
             background-color: #0000CD;
             border: solid 1px #0000CD;
             border-radius: 5px;
             width: 100px;
             color: beige;
             margin-top: 10px;
         }
    </style>
</head>
<body>
    <div class="zhuti">

        <div class="form-group">
            <label for="admin">用戶名</label>
            <input type="text" class="form-control" id="username" autocapitalize="off">
            <small id="emailHelp" class="form-text text-muted">默認用戶名為:
                <strong>admin</strong>
            </small>
        </div>

        <div class="form-group">
            <label for="password">密碼</label>
            <input type="text" class="form-control" id="password">
            <small id="emaiHelp" class="form-text text-muted">默認密碼為:
                  <strong>123456</strong>
            </small>
        </div>

        <button type="submit" class="btn btn-primary" id="btnLogin">登錄</button>

    </div>

    <!-- <label for="mike">word</label>
    <input type="radio" name="sex" id="mike">
   
    <br>

    <label for="nike">nike</label>
    <input type="radio" name="sex" id="nike"> -->

    <script src="./js/axios.min.js"></script>
    <script>
         document.querySelector('#btnLogin').addEventListener('click',function(){
            //收集數據 
            const username =document.querySelector('#username').value
            const password =document.querySelector('#password').value
            //校驗數據
           if(username-length === 0 || password-length === 0){
               return alert('用戶和密碼不能爲空')
           }
           //發送數據
            axios.post('http://ajax-api.itheima.net/api/login',{username,password}).then(res=>{
            //處理數據
               console.log(res)
            //跳轉網頁
               location.href ='http://www.baidu.com'+username.value+password.value
           })

         })
    </script>
</body>
</html>